<template>
  <div>
    <!-- <div id="user">
      <div
        style="
          width: 60px;
          height: auto;
          background-color: rgb(93, 134, 145);
          margin-top: 39px;
          display: inline-block;
          position: relative;
          left: 1345px;
        "
        v-if="exit"
        v-on:mouseover="changeActive()"
        v-on:mouseout="removeActive()"
      >
        <div class="userMore">
          <p
            style="
              color: rgb(255 255 255);
              margin-left: 0px;
              margin-top: 5px;
              background-color: rgb(93, 134, 145);
            "
            @click="user()"
          >
            个人信息
          </p>
        </div>
        <div
          style="
            background-color: #999999;
            height: 1px;
            width: 50px;
            margin-left: 5px;
            margin-top: 5px;
          "
        ></div>
        <div class="userMore">
          <p
            style="
              margin-top: 5px;
              color: rgb(255 255 255);
              margin-left: 16px;
              background-color: rgb(93, 134, 145);
            "
            @click="exits()"
          >
            退出
          </p>
        </div>
      </div>
      <p
        style="
          float: right;
          width: 60px;
          margin-top: 5px;
          font-size: 18px;
          margin-right: 30px;
          color: rgb(255 255 255);
        "
        v-on:mouseover="changeActive()"
      >
        用户名
      </p>
      <img
        src="../../assets/head1.jpg"
        alt=""
        style="
          margin-left: 30px;
          border-radius: 50px;
          margin-top: 5px;
          margin-right: 10px;
          float: right;
          width: 30px;
          height: 30px;
        "
      />
    </div> -->
    <div id="vedio">
      <div style="width: 15%; display: inline-block"></div>
      <video
        :src="imgs[0].id"
        controls
        style="width: 70%; margin-top: 30px"
        currentTime="5"
        autoplay
      ></video>
      <div style="width: 15%; display: inline-block"></div>
    </div>
    <div id="introduce" style="height: auto">
      <div style="width: 15%; display: inline-block"></div>
      <div
        style="
          width: 70%;
          display: inline-block;
          background-color: #fff;
          box-shadow: 2px 2px 10px 2px #ddd;
          margin-top: 10px;
          margin-bottom: 15px;
          border-radius: 4px;
        "
      >
        <div
          style="
            font-size: 20px;
            margin-left: 15px;
            margin-top: 10px;
            font-weight: bold;
          "
        >
          作品介绍：
        </div>
        <p
          style="
            margin-left: 30px;
            font-size: 16px;
            width: 92%;
            display: inline-block;
            text-indent: 2em; //首行缩进
          "
        >
          {{ imgs[0].intro }}
        </p>
      </div>
      <div style="width: 15%; display: inline-block"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      exit: 0,
      imgs: [this.$route.params],
    };
  },
  created() {
    this.imgs[0].id =
      "http://47.108.176.163:7777/course_video/" + this.imgs[0].id + ".mp4";
  },
  methods: {
    changeActive() {
      this.exit = 1;
    },
    removeActive() {
      this.exit = 1;
    },
    exits() {
      this.$router.push({ name: "Login", params: {} });
    },
    user() {
      this.$router.push({ name: "Info", params: {} });
    },
  },
};
</script>

<style scoped>
#user {
  background-color: rgb(93, 134, 145);
  height: 40px;
  width: 100%;
}
.userMore:hover {
  opacity: 0.8;
}
</style>
